<!-- 行情管理 -->
<template>
  <div>
    <el-tabs
      class="pageTab"
      v-model="newsTabCodeActive"
      type="card"
      @tab-click="tabClick"
    >
      <el-tab-pane
        v-for="(tab, index) in newsTabCodeArr"
        :label="tab.name"
        :name="tab.name"
        :key="index"
      ></el-tab-pane>
    </el-tabs>

    <Index
      ref="index1"
      v-if="newsTabCode.code == '1'"
      :newsTabCode="newsTabCode"
    />
    <Index2
      ref="index2"
      v-if="newsTabCode.code == '2'"
      :newsTabCode="newsTabCode"
    />
    <Index3
      ref="index3"
      v-if="newsTabCode.code == '3'"
      :newsTabCode="newsTabCode"
    />
    <Index4
      ref="index4"
      v-if="newsTabCode.code == '4'"
      :newsTabCode="newsTabCode"
    />
  </div>
</template>

<script>
import utils from "@/utils";

import Index from "./Index";
import Index2 from "./Index2";
import Index3 from "./Index3";
import Index4 from "./Index4";

export default {
  data() {
    return {
      newsTabCode: "", //新闻页签
      newsTabCodeActive: "", //新闻页签
      newsTabCodeArr: [], //新闻页签
    };
  },
  components: {
    Index,
    Index2,
    Index3,
    Index4,
  },
  mounted() {
    this.initOptions();
  },
  methods: {
    async initOptions() {
      this.newsTabCodeArr = [
        {
          name: "批发市场管理",
          code: "1",
        },
        {
          name: "品类管理",
          code: "2",
        },
        {
          name: "农产品管理",
          code: "3",
        },
        {
          name: "农产品行情",
          code: "4",
        },
      ];
      // 设置初始显示
      if (this.newsTabCodeArr.length > 0) {
        this.newsTabCode = this.newsTabCodeArr[0];
        this.newsTabCodeActive = this.newsTabCode.name;
      }

      this.query();
    },
    // tab切换
    tabClick(tab, event) {
      this.newsTabCode = this.newsTabCodeArr[tab.index];

      this.query();
    },
    query() {
      this.$nextTick(() => {
        let current = this.newsTabCode.code
        this.$refs[`index${current}`] && this.$refs[`index${current}`].query();
        // if (this.newsTabCode.code == "1") {
        //   this.$refs.index.query();
        // } else if (this.newsTabCode.code == "2") {
        //   this.$refs.index2.query();
        //   // } else {
        //   //   this.$refs.config.query();
        // }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.pageTab {
  margin: 15px;
}
</style>
